<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="ml10" v-show="showSearch">
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<!-- 表头选择信息 -->
					<el-form-item label="医生姓名" prop="doctorName">
						<el-input placeholder="请输入医生姓名" style="max-width: 180px" v-model="state.queryForm.doctorName" />
					</el-form-item>
					<el-form-item label="医生手机号" prop="doctorPhonenumber">
						<el-input placeholder="请输入医生手机号" style="max-width: 180px" v-model="state.queryForm.doctorPhonenumber" />
					</el-form-item>
					<el-form-item label="所属医院" prop="affiliatedHospital">
						<el-select placeholder="请选择所属医院" class="w100" clearable v-model="state.queryForm.affiliatedHospital">
							<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in affiliatedHospital" />
						</el-select>
					</el-form-item>
					<el-form-item label="所属科室" prop="department">
						<el-select placeholder="请选择所属科室" class="w100" clearable v-model="state.queryForm.department">
							<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in department" />
						</el-select>
					</el-form-item>
					<el-form-item label="职务" prop="position">
						<el-select placeholder="请选择医生职务" class="w100" clearable v-model="state.queryForm.position">
							<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in position" />
						</el-select>
					</el-form-item>
					<el-form-item label="身份" prop="permission">
						<el-select placeholder="请选择身份" class="w100" clearable v-model="state.queryForm.permission">
							<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in permission" />
						</el-select>
					</el-form-item>
					<!-- 查询重置功能 -->
					<el-form-item>
						<el-button @click="getDataList" icon="search" type="primary">
							查询
						</el-button>
						<el-button @click="resetQuery" icon="Refresh">重置</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<div class="mb8" style="width: 100%">
					<el-button plain :disabled="multiple" @click="formDialogRef.openDialog(selectFormObjs)" class="ml10" icon="Edit" type="primary" >
   				  批量修改
					</el-button>
					<el-button plain  class="ml10" icon="upload-filled" type="primary" @click="excelUploadRef.show()">
						导入
					</el-button>
					<!-- <el-button plain :disabled="multiple" @click="handleBatchDelete(selectObjs)" class="ml10" icon="Delete" type="primary" >
						批量删除
					</el-button> -->
				</div>
			</el-row>
			<el-table
				:data="state.dataList"
				@selection-change="handleSelectionChange"
				style="width: 100%"
				v-loading="state.loading"
				border
				:cell-style="tableStyle?.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
			>
				<!--表格名称  -->
				<el-table-column align="center" type="selection" width="40" />
				<el-table-column label="医生ID" prop="doctorUid" width="200" show-overflow-tooltip />
				<el-table-column label="姓名" prop="doctorName" show-overflow-tooltip />
				<el-table-column label="手机号" prop="doctorPhonenumber" show-overflow-tooltip />
				<el-table-column label="所属医院" prop="affiliatedHospital" show-overflow-tooltip />
				<el-table-column label="科室名称" prop="department" show-overflow-tooltip />
				<el-table-column label="职务" prop="position" show-overflow-tooltip />
				<el-table-column label="身份" prop="permission" show-overflow-tooltip />
				<!-- 修改与删除操作 -->
				<el-table-column label="操作" width="200">
					<template #default="scope">
						<el-button icon="edit-pen" @click="formDialogRef.openDialog(scope.row)" text type="primary" 
							>修改
						</el-button>

						<!-- <el-button icon="delete" @click="handleDelete([scope.row.doctorUid])" text type="primary"
							>删除
						</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
		</div>

    <!-- 修改  -->
    <form-dialog @refresh="getDataList()" ref="formDialogRef" />
    <!-- 导入excel -->
    <upload-excel title="批量添加医生账户" @refreshDataList="getDataList" ref="excelUploadRef"
      temp-url="/admin/sys-file/local/file/doctor.xlsx" url="/admin/custom_register/import_doctor" />
  </div>
</template>

<script lang="ts" name="systemPost" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { deletedoctorBasebatchdel, getDoctorBaseFetchList } from '/@/api/doctor/doctor';
import { deletedoctorBase } from '/@/api/doctor/doctor';
import { getDoctorBaseList } from '/@/api/doctor/doctor';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();

// 定义变量内容
const formDialogRef = ref();
const excelUploadRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const selectFormObjs = ref([]) as any;
const multiple = ref(true);

const affiliatedHospital = ref([
  { value: '长顺县医疗集团中心医院', label: '长顺县医疗集团中心医院' },
  { value: '长顺县人民医院', label: '长顺县人民医院' },
  { value: '长顺现代民族医院', label: '长顺现代民族医院' }
]);

const department = ref([{value:1,label:'心内科'}]);
const position = ref([
	{ value: '主任医师', label: '主任医师' },
  { value: '主治医师', label: '主治医师' },
  { value: '护士', label: '护士' }]);
const permission = ref([
	{ value: '医生管理员', label: '医生管理员' },
	{ value: '普通患者', label: '普通患者' }
]);


const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getDoctorBaseFetchList,
});


//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  getDataList();
};


// 多选事件
const handleSelectionChange = (objs: any) => {
	selectObjs.value = objs.map((item: any) => item.doctorUid);
	selectFormObjs.value = objs;
	multiple.value = !objs.length;
	if (multiple.value) {
		formDialogRef.value.form.batchForms = [];
	}
};


// 单个删除操作
const handleDelete = async (doctorUid: Object) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await deletedoctorBase(doctorUid);
		getDataList();
		useMessage().success("删除成功");
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

//批量删除
const handleBatchDelete = async (ids: number[]) => {
  if (!ids.length) return;

  try {
    await useMessageBox().confirm(t('common.delConfirmText'));
  } catch {
    return;
  }

  try {
    await deletedoctorBasebatchdel(ids);
    getDataList();
    useMessage().success("批量删除成功");
  } catch (err: any) {
    useMessage().error(err.msg || "批量删除失败");
  }
};
</script>
